<template>
    <div class="login-box">
        <div class="form-box">
            <div class="logo-box">
                <img class="logo" src="@/assets/header/logo.svg">
            </div>

            <div>
                <el-input v-model="form.username" placeholder="用户名"></el-input>

            </div>
            <div>
                <el-input v-model="form.password" type="password" placeholder="密码"></el-input>
            </div>
            <div>
                <el-input v-model="form.confrimPwd" type="password" placeholder="确认密码"></el-input>
            </div>

            <div class="bottom-box">
                <el-link type="danger" @click="router.push({ name: 'login' })">已有账号？去登录</el-link>
            </div>

            <div class="button-box">
                <el-button type="primary" style="width:80%;" @click="registerHandler">注册</el-button>
            </div>

        </div>
    </div>
</template>


<script setup>
import { reactive } from 'vue';
import router from '@/router';
import {register} from '@/api/user-service/user'
import { ElMessage } from 'element-plus';

const form = reactive({
    username: '',
    password: '',
    confrimPwd: '',
})

function registerHandler(){
    let username = form.username
    let password = form.password

    let data = {
        username,
        password
    }

    register(data)
    .then(res => {
        if(res.code == 200){
            ElMessage.success(res.msg)
        } else ElMessage.error(res.msg)
    })
}
</script>

<style scoped>
.login-box {
    height: 100%;

    display: flex;

    justify-content: center;
    align-items: center;

    background: linear-gradient(118deg, #1a2037, #2b2020, #000000);
    border-radius: 8px;
}

.form-box {
    width: 30%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.form-box .logo-box {
    text-align: center;
}

.form-box>div {
    margin-bottom: 15px;
    ;
    width: 100%;
}

.form-box .button-box {
    text-align: center;
}

.form-box .bottom-box {
    text-align: right;
}
</style>